<template>
	<view>
		<view class="container">
			<view class="header" @click="login">
				<view class="content" >
					<!-- <view class="my-image iconfont iconwode1"></view> -->
					<view class="my-info">
						<view><span>账户昵称: {{this.$store.state.user.userInfo.sjmc||'登录/注册'}}</span></view>
						<view>用户ID: {{this.$store.state.user.userInfo.dlzh||'暂无ID'}}</view>
					</view>
					<!-- <view class="jiantou">></view> -->
				</view>
			</view>
			
			<view class="notice" v-if="isNewOrder" @click="lookNewOrder">您有新的订单</view>
			<view class="notice" v-if="newOrderId != -1" @click="sendOrder">向所有骑手派单</view>
			<view  class="serve" @click="logout">退出登录</view>
			<!-- <button type="default" @click="testajax">自己测试用</button> -->
		</view>
	</view>
</template>

<script>
	import { createNamespacedHelpers } from 'vuex'
	const { mapState, mapActions, mapGetters, mapMutations  } = createNamespacedHelpers('order')
	import {closeConnection} from '@/utils/websocket.js'
	import {myRequest} from '@/api/ajax.js'
	import {userLogin} from '@/api/login/login.js'
	
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
			// console.log(this.$store.state.user.userInfo)
			console.log('this.isNewOrder = ', this.isNewOrder)
		},
		computed: {
			...mapState(['isNewOrder', 'newOrderId']),
			...mapMutations(['looked_newOrder'])
		},
		methods: {
			// 自己测试用
			async testajax() {
				let shopID = this.$store.state.user.userInfo.shopID
				let serialNumber = this.newOrderId
				console.log('shopID = ', shopID)
				console.log('serialNumber = ', serialNumber)
				
				/* // 确认接单
				let res = await this.$request({
					// url: '/supermarket/dd/takeOrder?shopID=1001&serialNumber=1646894273287100185',
					url: '/supermarket/dd/takeOrder?shopID=' + 1001 + '&serialNumber=' + 1646918815572100161,
					method: 'POST'
				})
				
				let res1 = await this.$request({
					url: '/supermarket/qd/sendOrder' + '?orderId=' + 1646918815572100161 + '&shopId=' + 1001,
					// url: '/supermarket/qd/sendOrder?orderId=1646900478444100168&shopId=1001',
					method: 'POST'
				})
				
				console.log('res1 = ', res1) */
			},
			
			logout(){
				console.log('logout')
				// 断开websocket
				closeConnection()
				this.$store.commit('user/logout_clear')
				uni.reLaunch({
					url:'/pages/login/login',
				})
				
			},
			
			// 点击查看新的订单
			async lookNewOrder() {
				// console.log('查看新的订单')
				this.$store.commit('order/looked_newOrder')
				uni.switchTab({
					 url: '/pages/order/order'
				})
			}, 
			

			/**
			 * 其中有一个确认接单的接口
			 * 向所有骑手派单
			 * TODO:
			 */
			async sendOrder() {
				let shopID = this.$store.state.user.userInfo.shopID
				let serialNumber = this.newOrderId
				
				// 确认接单
				let flag = await this.$request({
					url: '/supermarket/dd/takeOrder?shopID=' + shopID + '&serialNumber=' + serialNumber,
					method: 'POST'
				})
				console.log('flag = ', flag)
				// console.log('serialNumber = ', serialNumber)
				
				this.$store.commit('order/send_order')
				// 发送订单
				let res1 = await this.$request({
					url: '/supermarket/qd/sendOrder' + '?orderId=' + serialNumber + '&shopId=' + shopID,
					method: 'POST'
				})
				
				console.log('res1 = ', res1)
				
			}
		}
	}
</script>

<style lang="scss">
 page{background-color:#f5f5f5 !important;}
	.container{
		width: 100%;
	}
	
	.header{
		width: 100%;
		height: 220upx;
		background-color:#02a774 ;
		// background-color:red ;
		// border-top: 1upx solid #fff;
		border-top: 1rpx solid #fff;
		// margin-top: 30px;
		.content{
			// border:1upx solid blue; 
			margin: 40upx 40upx;
			overflow:hidden;
		}
		.my-image{
			width: 120upx;
			height:120upx;
			// border: 1upx solid red;
			float: left;
			border-radius:50% ;
			overflow:hidden;
			font-size: 120upx;
			background: #e4e4e4;
			 // vertical-align: top;
		}
		.my-info{
			// border: 1upx solid yellow;
			float: left;
			margin-left: 20upx;
			margin-top: 20upx;
			color: #fff;
		}
		.jiantou{
			float: right;
			color: #fff;
			margin-top: 35upx;
		}
	}
	
	.serve{
		margin-top: 50upx;
		text-align: center;
		border-bottom: 1upx solid #F1F1F1 ;
		line-height: 70upx;
		// background-color: #02a774;
		// color: #fff;
		background-color: #fff;
	}
	
	.notice{
		margin-top: 50upx;
		color: #f00;
		line-height: 70upx;
		background-color: #fff;
		padding-left: 20upx;
	}
</style>
